<template>
  <div class="list-container">
    <div class="tool-bar">
<!--      <el-select clearable v-model="type" placeholder="请选择博客分类">-->
<!--        <el-option-->
<!--          v-for="item in categoryList"-->
<!--          :key="item.code"-->
<!--          :label="item.value"-->
<!--          :value="item.code">-->
<!--        </el-option>-->
<!--      </el-select>-->
      <el-input clearable v-model="keyword" placeholder="请输入关键词搜索" style="width: 240px;margin: 0 24px;" />
      <el-button type="primary" icon="el-icon-search" @click="getBlogList">查询</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="onAdd">新增博客</el-button>
    </div>
    <el-table :data="tableData" :max-height="tableHeight">
      <el-table-column
        prop="blogName"
        label="博客标题"
        min-width="300"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="blogCategoryName"
        label="博客分类"
        width="160"
        align="center">
      </el-table-column>
      <el-table-column
        prop="tagNames"
        label="博客标签"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="blogNo"
        width="100"
        label="博客编码"
        align="center">
      </el-table-column>
      <el-table-column
        prop="blogIndex"
        width="100"
        label="首页显示"
        align="center">
        <template slot-scope="scope">{{scope.row.blogIndex ? '显示' : '不显示'}}</template>
      </el-table-column>
      <el-table-column
        prop="blogRate"
        width="160"
        label="博客评级"
        align="center">
        <template slot-scope="scope">
          <el-rate v-model="scope.row.blogRate" />
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        width="140"
        label="发布时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="blogView"
        label="浏览量"
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="oprate"
        label="操作"
        width="160"
        align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" plain @click="onEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" plain @click="onDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="page-wrap"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="current"
      :page-size="pageSize"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      @size-change="handleSizeChange"
      @current-change="getBlogList"
    />
  </div>
</template>
<script>

import { queryBlog, getCategory, deleteBlog } from '../api/index';

export default {
  name: 'AtList',
  data() {
    return {
      tableData: [],
      current: 1,
      pageSize: 10,
      tableHeight: 200,
      total: 0,
      categoryList: [],
      type: 'KY',
      keyword: ''
    };
  },
  methods: {
    getCategoryList() {
      getCategory().then(res => {
        this.categoryList = res.data.data || [];
      });
    },
    getBlogList() {
      queryBlog({
        page: this.current,
        limit: this.pageSize,
        type: this.type,
        keyword: this.keyword
      }).then(res => {
        if (res.data.success) {
          this.tableData = res.data.data || [];
          this.total = res.data.count;
        }
      });
    },
    getTableHeight() {
      const wrapH = this.$el.clientHeight;
      this.tableHeight =  wrapH - 80;
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getBlogList();
    },
    onAdd() {
      this.$emit('on-add');
    },
    onEdit(row) {
      this.$emit('on-edit', row);
    },
    onDelete(row) {
      this.$confirm('此操作将永久删除该博客, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBlog(row.blogId).then(res => {
          if (res.data.success) {
            this.$message.success('删除成功!');
            this.getBlogList();
          }
        });
      });
    }
  },
  mounted() {
    this.getCategoryList();
    this.getBlogList();
    this.$nextTick(this.getTableHeight);
  },
  beforeDestroy() {
    
  },
}
</script>

<style lang="scss" scoped>
.list-container {
  height: 100%;
}

.tool-bar {
  text-align: left;
  margin-bottom: 8px;
}

.page-wrap {
  text-align: center;
  margin-top: 8px;
}
</style>
